<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index</title>
 
<!-- Required Stylesheets -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/icheck/blue.css">

<!-- Required Javascript -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap-treeview.min.js"></script>
 <style>
       #tree{
          width:300px;
       }
    </style>
  </head>
  
  <body>
    <div id="tree"></div>
    <script type="text/javascript">
   $(function(){
    	$.ajax({
    		url:"<%=request.getContextPath()%>/category/category_getCategoryTree?id=1",
    		dataType:"text",
    		success:function(data){
    			var tree = '['+data+']';
    			//alert(tree);
    			$('#tree').treeview({data: tree});//,enableLinks:true
    			$('#tree').treeview('expandAll', { levels: 4, silent: true });
    			$('#tree').on('nodeSelected', function(event, node) {
    				//tag数组第一位是id，第二位是level
    				//alert()
    				//根节点不显示修改
    				if(node.tags[1]==0){
    					$('#childDiv').removeAttr('style');
    					$('#selfDiv').attr('style','display:none');
    				}else if(node.tags[1]==4){
    				//叶节点不显示添加子分类
    					$('#childDiv').attr('style','display:none');
    					$('#selfDiv').removeAttr('style');
    				}else{
    					$('#childDiv').removeAttr('style');
    					$('#selfDiv').removeAttr('style');
    				}
    				$('#myModalLabel').html(node.text);
    				$('#categoryName').val(node.text);
    				$('#myModal').modal({keyboard: true});
    				$('#nodeId').val(node.tags[0]);
    				$('#nodeLevel').val(node.tags[1]);
    			});
    		}
    	});
    });
   //添加子分类
   function addChildCategory(){
	  var categoryName = $('#childName').val();
	  if(categoryName!=undefined&&categoryName!=""&&window.confirm("确定添加分类吗？")){
		  var nodeId = $('#nodeId').val();
		  var nodeLevel = $('#nodeLevel').val();
		  $.ajax({
			  url:"<%=request.getContextPath()%>/category/category_addChildCategory",
			  data:{
				  'category.name':categoryName,
				  'category.id':nodeId,
				  'category.level':nodeLevel
			  },
			  dataType:'json',
			  success:function(value){
				  alert(value.message);
				  //成功则刷新页面
				  if(value.success==true){
					  window.location.href="<%=request.getContextPath()%>/categoryMng.jsp";
				  }
			  }
		  });
	  }
   }
   //修改分类名称
   function updateName(){
	   var categoryName = $('#categoryName').val();
	   if(categoryName!=undefined&&categoryName!=""&&window.confirm("确定修改此分类名称吗？")){
		   var nodeId = $('#nodeId').val();
		   $.ajax({
			   url:"<%=request.getContextPath()%>/category/category_updateCategory",
				  data:{
					  'category.name':categoryName,
					  'category.id':nodeId
				  },
				  dataType:'json',
				  success:function(value){
					  alert(value.message);
					  //成功则刷新页面
					  if(value.success==true){
						  window.location.href="<%=request.getContextPath()%>/categoryMng.jsp";
					  }
				  }
		   });
	   }
	   
   }

    </script>
    <!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                <h4 class="modal-title" id="myModalLabel"></h4>
	            </div>
	            <div class="modal-body" style="text-align: center">
	            	<div id="childDiv">
		            	<label>子分类名称：</label><input id="childName" type="text">
		            	<button type="button" class="btn btn-primary" onclick="addChildCategory()">添加子分类</button>
	            	<br><br>
	            	</div>
	            	<div id="selfDiv">
		            	<label>修改分类名称：</label><input type="text" id="categoryName">
		            	<button onclick="updateName()" type="button" class="btn btn-primary">修改分类名称</button>
	            	</div>
	            </div>
	            <input type="hidden" id="nodeId">
	            <input type="hidden" id="nodeLevel"> 
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</div>
  
  </body>
  
</html>
